<script setup lang="ts">
import { ref } from 'vue'
import { Lock, User } from '@element-plus/icons-vue'
import { getLogin } from '@/apis/login'
import router from '@/router'
import { useUserStore } from '@/stores/useUser'
const username = ref('admin')
const password = ref('123456')
const useUser=useUserStore()
function code(){
  getLogin({adminname:username.value,password:password.value}).then(res=>{
    console.log(res.data);
    useUser.changeToken(res.data.data.token)
    useUser.changeAdminId(res.data.data.adminid)
    router.push('/home')
  })
}
</script>

<template>
    <div class="login-page">
    <div class="login-container">
      <h1>嗨购管理系统</h1>
      <form action="/login" method="post">
      <el-input
        v-model="username"
        placeholder="管理员账户"
        :prefix-icon="User"
        class="input-item"
      />
      <el-input
        v-model="password"
        placeholder="管理员密码"
        type="password"
        :prefix-icon="Lock"
        class="input-item"
      />
      <el-button type="primary" class="login-btn" @click="code">登录</el-button>
    </form>
      <p class="info">账号：admin 密码：123456</p>
    </div>
  </div>
</template>

<style scoped>
.login-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-container {
  width: 300px;
  text-align: center;
}

.login-container h1 {
  color: #fff;
  font-size: 28px;
  margin-bottom: 24px;
}

.input-item {
  width: 100%;
  margin-bottom: 16px;
}

.info {
  color: #fff;
  font-size: 14px;
  margin-top: 20px;
}
</style>